<template>
	<article class="page page-idcard-generator">
		<h4 class="text-center">身份证生成器</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-4 left">
					<fieldset>
						<legend>参数设置</legend>
						<div class="fieldset-content">
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">姓名</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="name" placeholder="姓名" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">民族</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="nation" placeholder="民族" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">身份证号</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" :maxlength="18" v-model.trim="cardid" placeholder="身份证号" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">出生日期</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="birthday" placeholder="出生日期" disabled />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">性别</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="sex" placeholder="性别" disabled />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">地址</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="address" placeholder="地址" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">照片</label>
								<div class="row-flex-main">
									<input class="form-control" type="file" accept="image/*" @change="fileChange" placeholder="选择照片" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">发证机关</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="organ" placeholder="发证机关" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">发证日期</label>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="organStart" placeholder="生效日期" />
								</div>
								<span style="margin: 0 0.5em;">~</span>
								<div class="row-flex-main">
									<input class="form-control" type="text" v-model.trim="organEnd" placeholder="到期日期" />
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-8 right">
					<fieldset>
						<legend>生成结果</legend>
						<div class="fieldset-content">
							<div class="form-group form-group-main">
								<div class="idcard-front">
									<div class="idcard-text idcard-name">{{ name }}</div>
									<div class="idcard-text idcard-sex">{{ sex }}</div>
									<div class="idcard-text idcard-nation">{{ nation }}</div>
									<div class="idcard-text idcard-birthday-year">{{ birthdayInfo.year }}</div>
									<div class="idcard-text idcard-birthday-month">{{ birthdayInfo.month }}</div>
									<div class="idcard-text idcard-birthday-day">{{ birthdayInfo.day }}</div>
									<div class="idcard-text idcard-address">{{ address }}</div>
									<div class="idcard-text idcard-cardid">{{ cardid }}</div>
									<img class="idcard-img" :src="photoSrc" />
								</div>
								<div class="idcard-opposite">
									<div class="idcard-text idcard-organ">{{ organ }}</div>
									<div class="idcard-text idcard-organTime">
										{{ organStart }}<span>-</span>{{ organEnd }}
									</div>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
export default {
	name: 'idcard-generator',
	data () {
		return {
			name: '',
			nation: '',
			cardid: '',
			address: '',
			photoSrc: '',
			photoFile: null,
			organ: '',
			organStart: '',
			organEnd: '',
			loadingCount: 0
		}
	},
	computed: {
		sex () {
			let num = parseInt(this.cardid.substring(16, 17)) || 0
			return num % 2 ? '男' : '女'
		},
		birthday () {
			return this.cardid.substring(6, 14)
		},
		birthdayInfo () {
			let year = parseInt(this.birthday.substring(0, 4)) || ''
			let month = parseInt(this.birthday.substring(4, 6)) || ''
			let day = parseInt(this.birthday.substring(6, 8)) || ''
			return {year, month, day}
		}
	},
	methods: {
		fileChange (e) {
      let reg = /^(?:image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i
      if (!e.target.files) {
        return this.$toast('未找到有效文件！')
      }
      if (!reg.test(e.target.files[0].type)) {
        return this.$toast('必须选择一个图片文件！')
      }
      if (e.target.files.length === 0) {
        this.photoSrc = ''
        this.photoFile = null
      } else if (e.target.files[0]) {
        let fr=new FileReader()
        fr.onload = (evt) => {
          this.photoSrc = evt.target.result
          this.photoFile = e.target.files[0]
        }
        fr.readAsDataURL(e.target.files[0])
      }
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-idcard-generator {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.form-group-main {
			height: 0;
			flex-grow: 1;
		}
		.left {
			.row-flex {
				.row-flex-prefix {width: 4.5em; text-align: right;}
				.row-flex-main {text-align: left;}
				& + .row-flex {
					margin-top: .5em;
				}
			}
		}
		.right {
			.form-group-main {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			.idcard-front,
			.idcard-opposite {
				width: 8.56cm;
				height: 5.4cm;
				font-size: .32cm;
				font-family: '黑体';
				color: #bbb;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
				position: relative;
				filter: invert(1);
			}
			.idcard-front {
				background-image: url("~@/assets/images/tools/idcard-front.png");
			}
			.idcard-opposite {
				background-image: url("~@/assets/images/tools/idcard-opposite.png");
			}
			.idcard-img {position: absolute; width: 26mm; height: 32mm; left: 5.329cm; top: 0.825cm; border: none;}
			.idcard-text {
				position: absolute;
				&.idcard-name {font-size: .35cm; left: 1.7cm; top: .725cm;}
				&.idcard-sex {left: 1.7cm; top: 1.36cm;}
				&.idcard-nation {left: 3.525cm; top: 1.36cm;}
				&.idcard-birthday-year {left: 1.7cm; top: 1.99cm;}
				&.idcard-birthday-month {left: 3.025cm; top: 1.99cm;}
				&.idcard-birthday-day {left: 3.72cm; top: 1.99cm;}
				&.idcard-address {left: 1.7cm; top: 2.645cm; width: 3.316cm;}
				&.idcard-cardid {font-size: .38cm; left: 3cm; top: 4.275cm; letter-spacing: .12em;}
				&.idcard-organ {left: 3.5cm; top: 3.78cm;}
				&.idcard-organTime {
					left: 3.5cm; top: 4.45cm;
					span {margin: 0 .1em;}
				}
			}
		}
	}
}
</style>
